import classNames from 'classnames'
import { withNativeProps } from '../../utils/native-props'
import { TimelineItemProps } from './type'

const classPrefix = 'rt-timeline-item'

export const TimelineItem: React.FC<TimelineItemProps> = (props) => {
  const {
    color = 'blue',
    children,
    dot,
    label,
    pending = false,
  } = props

  const itemClassName = classNames({
    [classPrefix]: true,
    [`${classPrefix}-pending`]: pending,
  })

  const dotClassName = classNames({
    [`${classPrefix}-head`]: true,
    [`${classPrefix}-head-custom`]: !!dot,
    [`${classPrefix}-head-${color}`]: true,
  })

  const customColor = /blue|red|green|gray/.test(color || '') ? undefined : color

  return withNativeProps(
    props,
    <li className={itemClassName}>
      {label && (
        <div className={`${classPrefix}-label`}>
          {label}
        </div>
      )}
      <div className={`${classPrefix}-tail`} />
      <div
        className={dotClassName}
        style={{ borderColor: customColor, color: customColor }}
      >
        {dot}
      </div>
      <div className={`${classPrefix}-content`}>
        {children}
      </div>
    </li>,
  )
}
